<template>
	<view class="page-box">

		<scroll-view class="page-scroll" scroll-y>
			<view class="page-scroll-content">

				<view class="common-text-title1">认证职业医师</view>
				<view class="row-t1-25 common-text-title1-gray">所有信息仅用于资格认证，不会用于其他用途，我们将严格保护您的隐私</view>
				<u-upload :header="{ Authorization: TOKEN }" :action="apis.uploadImage" max-count='1' class="row-t1-25 row-center" :custom-btn="true" @on-success="onSuccess">
					<view v-if="!form.avatar" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					</view>
					<image v-else slot="addBtn" :src="img_url + form.avatar" style="width: 200rpx;height: 200rpx;"></image>
				</u-upload>
				<view class="row-t1-25 common-text-title1 row-center">请上传真实的本人认证头像</view>
				<u-cell-group class="row-t1-25" title-bg-color="rgb(243, 244, 246)">
					<u-cell-item class="border-top border-bottom u-cell-item-m" :arrow="showArrow">
						<view slot="title" class="common-text-title1">姓名</view>
						<view slot="right-icon">
							<input v-model="form.nickName" style="text-align: right;padding-right: 30rpx;" placeholder-style="color: #949494;font-size: 31rpx;text-align: right" placeholder="请输入真实的医师姓名"/>
						</view>
					</u-cell-item>
					<u-cell-item class="border-top border-bottom u-cell-item-m" @click="show=true">
						<view slot="title" class="common-text-title1">医院</view>
						<view slot="value" class="common-text-title1-gray">
							{{ xian || '选择所在的医疗机构' }}</view>
						<view slot="right-icon" class="right-arrow"></view>
					</u-cell-item>
					<u-cell-item class="border-top border-bottom u-cell-item-m" @click="dcDepartCfg.showSelect = true"
						:arrow=showArrow>
						<view slot="title" class="common-text-title1">科室</view>
						<view slot="value" class="common-text-title1-gray">
							{{dcDepartCfg.selectedValue?dcDepartCfg.selectedValue:'选择所在的科室'}}</view>
						<view slot="right-icon" class="right-arrow"></view>
					</u-cell-item>
					<u-cell-item class="border-top border-bottom u-cell-item-m" @click="dcPostCfg.showSelect = true"
						:arrow=showArrow>
						<view slot="title" class="common-text-title1">职称</view>
						<view slot="value" class="common-text-title1-gray">
							{{dcPostCfg.selectedValue?dcPostCfg.selectedValue:'请选择职称'}}
						</view>
						<view slot="right-icon" class="right-arrow"></view>
					</u-cell-item>
					<u-cell-item class="border-top border-bottom u-cell-item-m" @click="dcTitleCfg.showSelect = true"
						:arrow=showArrow>
						<view slot="title" class="common-text-title1">职务</view>
						<view slot="value" class="common-text-title1-gray">
							{{dcTitleCfg.selectedValue?dcTitleCfg.selectedValue:'请选择职务'}}
						</view>
						<view slot="right-icon" class="right-arrow"></view>
					</u-cell-item>

				</u-cell-group>

				<view class="row-t1-25 common-text-title1">请上传相关证件照片（包括《医师执业证书》等）</view>

				<u-upload :header="{ Authorization: TOKEN }" :action="apis.uploadImage" max-count='1'  @on-success="onSuccessLicense" class="row-t1-25" :custom-btn="true">
					<view v-if="!form.cert" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"></view>
					<image v-else slot="addBtn" :src="img_url + form.cert" style="width: 200rpx;height: 200rpx;"></image>
				</u-upload>

				<view class="row-t1-25 common-text-title1">请上传工作证</view>

				<u-upload :header="{ Authorization: TOKEN }" :action="apis.uploadImage" max-count='1'  @on-success="onSuccessLicense" class="row-t1-25" :custom-btn="true">
					<view v-if="!form.cert" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"></view>
					<image v-else slot="addBtn" :src="img_url + form.cert" style="width: 200rpx;height: 200rpx;"></image>
				</u-upload>

				<view class="row-t1-25 common-text-title1">请上传其他证书</view>

				<u-upload :header="{ Authorization: TOKEN }" :action="apis.uploadImage" max-count='1'  @on-success="onSuccessLicense" class="row-t1-25" :custom-btn="true">
					<view v-if="!form.cert" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"></view>
					<image v-else slot="addBtn" :src="img_url + form.cert" style="width: 200rpx;height: 200rpx;"></image>
				</u-upload>

				

				<view class="row-t1-25 common-text-title1">请上传身份证照片</view>

				<u-upload :header="{ Authorization: TOKEN }" :action="apis.uploadImage" max-count='1' class="row-t1-25"  @on-success="onSuccessCard" :custom-btn="true">
					<view v-if="!form.identityCards" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"></view>
						<image v-else slot="addBtn" :src="img_url + form.identityCards" style="width: 200rpx;height: 200rpx;"></image>
				</u-upload>
			</view>

		</scroll-view>

		<view>
			<view class='btn-submit' @click="clkSubmit()" :ripple="true">{{ form.auditType === '1' ? '提交认证' : '修改认证' }}</view>

		</view>
<!-- 		<u-picker mode="multiSelector" v-model="show"  :default-selector='valueArray' :range="multiSelector" @columnchange="columnchange"></u-picker> -->
		<u-select v-model="dcTitleCfg.showSelect" mode="single-column" :label-name="'title'" :list="dcTitleCfg.listData"
			@confirm="confirmDcTitle">
		</u-select>
		<u-select v-model="dcPostCfg.showSelect" mode="single-column"  :label-name="'title'" :list="dcPostCfg.listData"
			@confirm="confirmDcPost">
		</u-select>
		<u-select v-model="dcDepartCfg.showSelect" mode="mutil-column-auto" :value-name="'id'" :label-name="'depName'" :list="dcDepartCfg.listData"
			@confirm="confirmDcDepart">
		</u-select>
		<u-select v-model="dcHospitalCfg.showSelect" mode="mutil-column-auto" :list="dcHospitalCfg.listData"
			@confirm="confirmDcHospital">
		</u-select>
		<multeSelect :visible="show" @closeEvent="closeEvent"></multeSelect>
	</view>
</template>

<script>
	import apis from '@/apis.js'
	import multeSelect from '@/components/multeSelect/multeSelect.vue'
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		comments: {
			multeSelect
		},
		data() {
			return {
				show: false,
				valueName: '',
				multiSelector: [
					[], 
					[],
					[]
				],
				provice: '',
				pIndex: 0,
				city: '',
				cIndex: 0,
				xian: '',
				xIndex: 0,
				valueArray: [0, 0, 0],
				proviceList: [],
				cityList: [],
				apis: apis,
				dcHospitalCfg: {
					showSelect: false,
					selectedValue: '',
					selectedIds: '',
					listData: [{
							value: 1,
							label: '北京',
							children: [{
									value: 2,
									label: '东城区',
									children: [{
											value: 3,
											label: '医院名称'
										},
										{
											value: 4,
											label: '医院名称'
										}
									]
								},
								{
									value: 5,
									label: '朝阳区',
									children: [{
											value: 6,
											label: '医院名称'
										},
										{
											value: 7,
											label: '医院名称'
										}
									]
								}
							]
						},
						{
							value: 8,
							label: '天津',
							children: [{
								value: 9,
								label: '东城区',
								children: [{
									value: 10,
									label: '医院名称'
								}, {
									value: 10,
									label: '医院名称'
								}, ]
							}]
						}
					],

				},
				dcDepartCfg: {
					showSelect: false,
					selectedValue: '',
					selectedIds: '',
					listData: [],

				},
				dcPostCfg: {
					showSelect: false,
					selectedValue: '',
					selectedIds: '',
					listData: [],

				},

				dcTitleCfg: {
					showSelect: false,
					selectedValue: '',
					selectedIds: '',
					listData: [],
				},

				showArrow: false,
				loadStatus: ['loadmore'],
				form: {
					auditType: '1',
					avatar: '', // 头像
					cert: '', // 证书
					identityCards: '', // 身份证
					nickName: '',
					depId: '',  // 科室
					post: '', // 职务
					professionalTitle: '', //职称
				},
			};
		},
		onLoad(options) {
			this.form.auditType = options.auditType
			this.getList()
			this.getDictList()
			if (this.form.auditType === '2') {
				this.getDetail()
			}
		},
		computed: {
			...mapState([ 'TOKEN', 'img_url']),
		},
		methods: {
			getDetail() {
				this.$http.get(apis.userDetail).then(res => {
					if (res.data.code === 200) {
						this.form.hospitalId = res.data.result.hospitalId
						this.xian = res.data.result.hospitalId_dictText
						this.form.avatar = res.data.result.avatar
						this.form.cert = res.data.result.cert
						this.form.identityCards = res.data.result.identityCards
						this.dcPostCfg.selectedValue = res.data.result.professionalTitle_dictText
						this.form.professionalTitle = res.data.result.professionalTitle
						this.dcTitleCfg.selectedValue = res.data.result.post_dictText
						this.form.post = res.data.result.post
						this.dcDepartCfg.selectedValue = res.data.result.depId_dictText
						this.form.depId = res.data.result.depId
						this.form.nickName = res.data.result.nickName
					}
				})
			},
			getDictList() {
				this.$http.get(`${apis.getDictItems}/professional_title`).then(res => {
					if (res.data.code === 0) {
						this.dcPostCfg.listData = res.data.result
					}
				})
				this.$http.get(`${apis.getDictItems}/position_rank`).then(res => {
					if (res.data.code === 0) {
						this.dcTitleCfg.listData = res.data.result
					}
				})
				this.$http.get(apis.getAllDepartment).then(res => {
					if (res.data.code === 200) {
						this.dcDepartCfg.listData = res.data.result
					}
				})
			},
			/**
			 *  @function 认证
			 */
			clkSubmit() {
				if (!this.form.avatar) {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
					return
				}
				if (!this.form.depId) {
					uni.showToast({
						title: '请选择科室',
						icon: 'none'
					})
					return
				}
				if (!this.form.hospitalId) {
					uni.showToast({
						title: '请选择医院',
						icon: 'none'
					})
					return
				}
				if (!this.form.identityCards) {
					uni.showToast({
						title: '请上传身份证',
						icon: 'none'
					})
					return
				}
				if (!this.form.cert) {
					uni.showToast({
						title: '请上传证书',
						icon: 'none'
					})
					return
				}
				if (!this.form.nickName) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
					return
				}
				if (!this.form.post) {
					uni.showToast({
						title: '请选择职务',
						icon: 'none'
					})
					return
				}
				if (!this.form.professionalTitle) {
					uni.showToast({
						title: '请选择职称',
						icon: 'none'
					})
					return
				}
				this.$http.post(apis.userApplySave, this.form).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/tabbar-5/tabbar-5'
							})
						}, 2000)
					}
				})
			},
			/**
			 * @param {Object} selectedValue 职务
			 */
			confirmDcTitle(selectedValue) {
				if (selectedValue && selectedValue.length > 0) {
					this.form.post = selectedValue[0].value
					this.dcTitleCfg.selectedValue = selectedValue[0].label;
				}
			},
			/**
			 * @param {Object} selectedValue职称
			 */
			confirmDcPost: function(selectedValue) {
				if (selectedValue && selectedValue.length > 0) {
					this.form.professionalTitle = selectedValue[0].value
					this.dcPostCfg.selectedValue = selectedValue[0].label;
				}
			},
			onSuccess(e) {
				console.log(e.message, 'onSuccess')
				this.form.avatar = e.message
			},
			/**
			 *  执照回调
			 */
			onSuccessLicense(e) {
				this.form.cert = e.message
			},
			/**
			 *  @function 身份证回调
			 */
			onSuccessCard(e) {
				this.form.identityCards = e.message
			},
			confirmDcHospital: function(selectedValue) {
				if (selectedValue && selectedValue.length > 0) {
					console.log(selectedValue[0].label);
					this.dcHospitalCfg.selectedValue = '';
					this.dcHospitalCfg.selectedIds = '';
					let _this = this;
					selectedValue.forEach(function(cur, index, array){
						if(_this.dcHospitalCfg.selectedValue) {
							_this.dcHospitalCfg.selectedValue += "," + cur.label;
						} else {							
							_this.dcHospitalCfg.selectedValue += cur.label;
						}
					})
				}
			},
			confirmDcDepart(selectedValue) {
				if (selectedValue && selectedValue.length > 0) {
					this.dcDepartCfg.selectedValue = selectedValue[0].label
					this.form.depId = selectedValue[0].value
				}
			},
			getList() {
				this.$http.get(apis.hospitalList).then(res => {
					let data = res.data
					this.proviceList = Object.keys(data)
					this.proviceList.unshift(' ')
					this.cityList = Object.values(data)
					this.cityList.unshift([])
					this.cityList.forEach(item => {
						if (item.length) {
							item.unshift(' ')
						}
					})
					this.multiSelector = [
						this.proviceList,
						[],
						[]
					]
				})
			},
			getHost(prov, city) {
				this.$http.get(apis.queryHospitalByProvCity, { city: city, prov: prov }).then(res => {
					this.xianList = res.data.result
					let proviceList = this.proviceList
					let cityList = this.cityList[this.pIndex]
					let xianList = this.xianList.map(item => item.hospital)
					this.xian = this.xianList[0].hospital
					this.multiSelector = [
						proviceList,
						cityList,
						xianList
					]
				})
			},
			columnchange(e) {
				let column = e.column
				let index = e.index
				if (column === 0) {
					this.pIndex = index
					this.provice = this.multiSelector[column][index]
					this.multiSelector[1] = this.cityList[this.pIndex]
				}
				if (column === 1) {
					this.city = this.multiSelector[column][index]
					this.cIndex = index
					this.getHost(this.provice, this.city)
				}
				if (column === 2) {
					this.xian = this.multiSelector[column][index]
				}
				this.valueName = this.xian
			},
			closeEvent(data) {
				this.show = data.visible
				this.xian = data.hospital
				this.form.hospitalId = data.id
			}
		},

	};
</script>
<style lang="scss" scoped>
	.page-box {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;

		.page-scroll {
			height: 100rpx;
			flex-grow: 1;

			.page-scroll-content {
				padding: 37rpx 29rpx 10rpx;
				display: flex;
				flex-flow: column nowrap;

			}
		}
	}


	.btn-submit {
		width: 308rpx;
		
		margin-top: 38rpx;
		margin-bottom: 23rpx;
		height: 62rpx;
		background: #3FA7FF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 4rpx;

		font-size: 31rpx;
		font-family: SimHei;
		font-weight: 400;
		text-align: center;
		line-height: 62rpx;
		color: #FFFFFF;
		opacity: 1;
		margin: 0 auto;
	}



	.u-cell-item-m {
		padding: 29rpx 0;
	}
</style>
